<template>
  <Card class="wrapper">
    <h3>Password Reset</h3>
    <Form ref="accountSet"  :model="accountSet" :rules="ruleCustom" :label-width="150" show-message autocomplete="on" class="account-set-form">
      <FormItem label="New Password" prop="newPassword">
        <Input type="password" v-model="accountSet.newPassword" placeholder="New Password"></Input>
      </FormItem>
      <FormItem label="Confirm New password" prop="confirmNewPassword">
        <Input type="password" v-model="accountSet.confirmNewPassword" placeholder="Confirm New password"></Input>
      </FormItem>
      <FormItem label="Code"  prop="captcha">
        <div class="code-wrapper">
          <Input type="text" v-model="accountSet.captcha" placeholder="Code" class="input" style="width: 130px"></Input>
          <img :src="captchaImgCode" alt="code">
          <span @click="getCaptchaFunc" class="get-captcha-code">Change one</span>
        </div>
      </FormItem>
      <FormItem class="account-set-btns">
        <Button type="primary" @click="handleSubmit('accountSet')" class="login-btn">Confirm</Button>
        <Button type="default" @click="handleReset('accountSet')" class="login-btn" style="margin-left: 10px;">Cancel</Button>
      </FormItem>
    </Form>
    <Alert type="error" show-icon v-if="accountSetFailMsg" closable>
      An error prompt
      <span slot="desc">
            {{accountSetFailMsg}}
        </span>
    </Alert>
    <Alert type="success" show-icon v-if="accountSetSuccessfulMsg" closable>
      An error prompt
      <span slot="desc">
            {{accountSetSuccessfulMsg}}
        </span>
    </Alert>
  </Card>
</template>

<script>
  import { passwordReset, getCaptcha } from '@/api/index';
  import { getmd5 } from '@/components/mixin';
  export default {
    name: 'ForgotPassword',
    mixins: [ getmd5 ],
    data () {
      const validatePassword = (rule, value, callback) => {
        if (value == '') {
          callback(new Error('Please enter your password'));
        } else {
          callback();
        }
      };
      const validateConfirmPassword = (rule, value, callback) => {
        if (value == '') {
          return callback(new Error('Name cannot be empty'));
        } else if (value !== this.accountSet.newPassword) {
          return callback(new Error('The values are not equal'));
        } else {
          callback();
        }
      };
      const validateCaptcha = (rule, value, callback) => {
        if (value == '') {
          callback(new Error('Please enter your verification code'));
        } else {
          callback();
        }
      };
      return {
        accountSet: {
          newPassword: '',
          confirmNewPassword: '',
          captcha: ''
        },
        captchaImgCode: '',
        ruleCustom: {
          newPassword: [
            { required: true, validator: validatePassword, trigger: 'blur' }
          ],
          confirmNewPassword: [
            { required: true, validator: validateConfirmPassword, trigger: 'blur' }
          ],
          captcha: [
            { required: true, validator: validateCaptcha, trigger: 'blur' }
          ]
        },
        accountSetFailMsg: '',
        accountSetSuccessfulMsg: ''
      }
    },
    created () {
      this.getCaptchaFunc();
    },
    methods: {
      getCaptchaFunc () {
        getCaptcha().then(res => {
          this.captchaImgCode = res.data.message;
        });
      },
      handleSubmit (form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            passwordReset(this.getmd5(this.accountSet.newPassword), this.getmd5(this.accountSet.confirmNewPassword)).then(res => {
              let resData = res.data;
              console.log(resData)
              if (resData.status == 0) {
                this.accountSetFailMsg = resData.msg;
                return false;
              } else if (resData.status == 1) {
                this.$Message.success('Success!');
                this.accountSetSuccessfulMsg = resData.msg
              }
            });
          } else {
            this.$Message.error('Fail!');
          }
        });
      },
      handleReset (form) {
        this.$refs[form].resetFields();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/sass/mixin';
  .wrapper {
    width: 55%;
    min-width: 400px;
    max-width: 650px;
    margin: 8% auto;
    text-align: left;
  }
  .account-set-form {
    display: inline-block;
    width: 80%;
    min-width: 400px;
    max-width: 550px;
    margin: 0 auto;
    padding-top: 20px;
    clear: both;
  }
  .account-set-btns {
    text-align: left;
  }
  .code-wrapper {
    @include fj(flex-start);
    img {
      margin-left: 10px;
    }
  }
  .get-captcha-code {
    margin-left: 10px;
    text-decoration: underline;
    cursor: pointer;
  }
</style>
